
@mixin ellipsis($behavior: ellipsis) {
	display: block;
	text-overflow: $behavior;
	white-space: nowrap;
	overflow: hidden;
}

@mixin ellipsis-multi(
	$font-size: 14px,
	$line-height: 1.3,
	$lines-to-show: 2
) {
	display: block;

	// `flex` doesn't work, fuck!
	display: -webkit-box;
	-webkit-line-clamp: $lines-to-show;
	-webkit-box-orient: vertical;
	height: ($font-size * $line-height * $lines-to-show) - 2;
	font-size: $font-size;
	line-height: $line-height;
	overflow: hidden;
	text-overflow: ellipsis;
}

@mixin word-break() {
	word-wrap: break-word;
	overflow: hidden;
}

@mixin clearfix() {
	&::after {
		content: '';
		display: table;
		clear: both;
	}
}

@mixin center($width, $height) {
	width: $width;
	height: $height;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -($width / 2);
	margin-top: -($height / 2);
}

@mixin center-transform() {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
}

@mixin center-flex() {
	display: flex;
	justify-content: center;
	align-items: center;
}

@mixin text-vertical-middle($height) {
	height: $height;
	line-height: $height;
}

@mixin full($position: absolute) {
	position: $position;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
}

@mixin full-100() {
	width: 100%;
	height: 100%;
}

@mixin backdrop-filter(
	$class-name,
	$saturate: 180%,
	$blur: 20px,
	$default-bg-color: rgba(255, 255, 255, 0.5),
	$fallback-bg-color: rgba(255, 255, 255, 0.9)
) {
	.#{$class-name} {
		background-color: $fallback-bg-color;
	}

	@supports (backdrop-filter: saturate($saturate) blur($blur)) {
		.#{$class-name} {
			background-color: $default-bg-color;
			backdrop-filter: saturate($saturate) blur($blur);
		}
	}
}
